export const taperBar = () => {
    return `
   
    <template>
    <div
      class="content"
   
    >
     <div :ref="echartsMap" id="mainChina"></div>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive, nextTick, onMounted, watch } from "vue";
  import "echarts";
  
  const state = reactive({
    option:  {
   //   backgroundColor:"#0F285C",
   grid: {
      containLabel: true,
      top: 30,
      right: 15,
      bottom: 30,
      left: 15
   },
   tooltip: {
      trigger: "axis",
      axisPointer: {
         type: 'none'
      },
   
      extraCssText: 'opacity: 0.8;background-color:#050F1B;padding:16px;box-shadow: 1px 6px 15px 1px rgba(0,0,0,0.13);border-radius: 4px;filter: blur(undefinedpx);border:none;'
   },
   xAxis: {
      // 类目轴
      type: "category",
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      axisTick: {
         show: false //隐藏X轴刻度
      },
      
      axisLine: {
         lineStyle: {
            color: "rgba(87, 206, 234, 1)"
         }
      },
      axisLabel: {
          color: "#D3E4FE",
        },
   },
   yAxis: {
      type: 'value',
        name:"(个)", 
              axisLine: {
              show: true,
              lineStyle: {
                 color: '#00A8FF'
              }
           },


        nameTextStyle: {
            color:"#97B2E0",
            padding:[0,0,-560,-50]
        },
        boundaryGap: [0, 0.01],

        splitLine: {
          lineStyle: {
            color: "#073370",
            width: 1,
            type: "dashed",
          },
        },
        axisLabel: {
          color: "#D3E4FE",
        },
        axisLine: {
          lineStyle: {
            color: "#073370",
            width: 1,
          },
        },
   },
   series: [
      {
         type: "pictorialBar",
          barWidth: "80",
         barCategoryGap: "12%",
         label: {
            normal: {
               show: true,
               position: "top",
               textStyle: {
                  color: "#FFFFFF",
                  fontSize: 12
               }
            }
         },
         itemStyle: {
            normal: {
               color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                     {
                        offset: 0,
                        color: "#2BCEFF"  // 0% 处的颜色
                     },
                     {
                        offset: 1,
                        color: "rgba(43, 206, 255, 0)" // 100% 处的颜色
                     }
                  ],
                  globalCoord: false // 缺省为 false
               } //渐变颜色
            }
         },
   
         symbol:
            "path://M12.000,-0.000 C12.000,-0.000 16.074,60.121 22.731,60.121 C26.173,60.121 -3.234,60.121 0.511,60.121 C7.072,60.121 12.000,-0.000 12.000,-0.000 Z",

         data: [132, 66, 54, 37, 88, 136, 12]
      }
   ]
},
  });
  let echartsMapel = ref("");
  let opt = null;
  const echartsMap = (e) => (echartsMapel.value = e);
  const init = () => {
    let myChart = echarts.init(echartsMapel.value);
    myChart.setOption(state.option);
    const setOption = (dataObj) => {
      let opt = myChart.getOption();
      Object.assign(opt, dataObj);
      myChart.setOption(opt);
    };
    return setOption;
  };
  
  onMounted(() => {
    init();
  });
  </script>
  
  <style scoped >
  .content {
    position: relative;
    width: 100%;
    box-shadow: 0px 3px 50px 1px rgba(0, 101, 175, 0.4);
  }
  #mainChina {
    width: 100%;
    height: 600px;
    background-color: #00184F;
  }
  </style>
  
  
    
    `;
  };
  